<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: DataType.Number.format()</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: DataType.Number.format()</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
/* custom styles for this example */
#demo label {display:block;}
#demo fieldset {margin:1em;}
#demo .short label, #demo .medium label {display:inline;}
#demo .short input {width:2em;}
#demo .medium input {width:5em;}
</style>

<div class="intro">
    <p>The Number module of the DataType Utility allows you to take a number and format it into a string with the following configuration parameters: <code>decimalPlaces</code>, <code>decimalSeparator</code>, <code>thousandsSeparator</code>, <code>prefix</code>, and <code>suffix</code>. Although this method allows you to specify HTML values, in this example the formatted output will be escaped for security.</p>
</div>

<div class="example yui3-skin-sam">
    <form id="demo">
    <fieldset>
        <label for="demo_number">Number to format: <input type="text" id="demo_number"></label>
    </fieldset>
    <fieldset class="short">
        <label for="demo_thousandsSeparator">Thousands separator: <input type="text" id="demo_thousandsSeparator"></label>
        <label for="demo_decimalSeparator">Decimal separator: <input type="text" id="demo_decimalSeparator"></label>
        <label for="demo_decimalPlaces">Decimal places: <input type="text" id="demo_decimalPlaces"></label>
    </fieldset>
    <fieldset class="medium">
        <label for="demo_prefix">Prefix: <input type="text" id="demo_prefix"></label>
        <label for="demo_suffix">Suffix: <input type="text" id="demo_suffix"></label>
    </fieldset>
    <fieldset>
        <input type="button" id="demo_btn" value="Show formatted string">: <span id="demo_output">&nbsp;</span>
    </fieldset>
</form>

<script>
YUI().use("node", "datatype-number", "escape", function (Y) {
    Y.on("click", function(e){
        var number = Y.DataType.Number.parse(Y.one("#demo_number").get("value")),
            output = Y.DataType.Number.format(number, {
                    prefix: Y.one("#demo_prefix").get("value"),
                    thousandsSeparator: Y.one("#demo_thousandsSeparator").get("value"),
                    decimalSeparator:Y.one("#demo_decimalSeparator").get("value"),
                    decimalPlaces: Y.DataType.Number.parse(Y.one("#demo_decimalPlaces").get("value")),
                    suffix: Y.one("#demo_suffix").get("value")
                });
                
        if(output === "") {
            output += "(Invalid number)"
        }
        Y.one("#demo_output").setContent(Y.Escape.html(output));
    }, "#demo_btn");
});
</script>

</div>

<p>To output a number as a string, simply call the <code>format()</code> function of the DataType.Number class:</p>

<pre class="code prettyprint">YUI().use(&quot;datatype-number&quot;, function(Y) {
    alert(Y.DataType.Number.format(123123123));

    &#x2F;&#x2F; This alerts the string &quot;123123123&quot;
});</pre>


The <code>format()</code> function also takes a variety of configuration parameters that manipulate the value of the string. This is helpful, for instance, when displaying numbers as currency:

<pre class="code prettyprint">YUI().use(&quot;datatype-number&quot;, function(Y) {
    alert(Y.DataType.Number.format(123123123.176,{
        prefix: &quot;&amp;#165;&quot;,
        thousandsSeparator: &quot;.&quot;,
        decimalSeparator: &quot;,&quot;,
        decimalPlaces: 2,
        suffix: &quot; (YEN)&quot;
    }));

    &#x2F;&#x2F; This alerts the string &quot;&amp;#165;123.123.123,18 (YEN)&quot;
});</pre>


<p><strong>Note:</strong> Although this method allows you to specify HTML values, in this example the formatted output will be escaped for security.</p>
</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Formatting dates into strings.">
                                        <a href="datatype-dateformat.html">DataType.Date.format()</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Formatting dates into strings using pre-packaged language resource bundles.">
                                        <a href="datatype-dateformat-lang.html">Formatting Dates Using Language Resource Bundles</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Parsing data into dates.">
                                        <a href="datatype-dateparse.html">DataType.Date.parse()</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Formatting numbers into strings.">
                                        <a href="datatype-numberformat.html">DataType.Number.format()</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Parsing data into numbers.">
                                        <a href="datatype-numberparse.html">DataType.Number.parse()</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Formatting XML documents into strings.">
                                        <a href="datatype-xmlformat.html">DataType.XML.format()</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Parsing strings into XML documents.">
                                        <a href="datatype-xmlparse.html">DataType.XML.parse()</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
